<template>
  <div class="error">
    <div class="top">
      <img src="../../assets/image/error.png" />
      <p>抱歉，您要找的页面不存在...</p>
    </div>
    <ul class="links clearfix">
      <li @click="handleHome">返回首页</li>
      <li @click="handleBack">返回上一页</li>
    </ul>
  </div>
</template>

<script type="text/javascript">
export default {
  methods: {
    handleHome () {
      this.$router.push({path: '/home'})
    },

    handleBack () {
      this.$router.back()
    }
  }
}
</script>

<style lang="stylus" scoped>
.error {
  text-align: center;

  .top {
    padding: 20% 0 5%;
    text-align: center;

    p {
      font-size: .2rem;
      color: #999;
    }
  }

  .links {
    margin: 0 auto;
    display: inline-block;

    li {
      float: left;
      margin: 0 .2rem;
      font-size: .25rem;
      color: #00CED1;
    }
  }
}
</style>